<!--
	To use Highcharts instead of Flot
	1) Download highcharts.js and add to the js directory
	2) Uncomment the include line for highcharts js in index.html and view.html
-->

<html xmlns="http://www.w3.org/1999/html">

<head>
	<link href="css/cupertino/jquery-ui-1.10.0.custom.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<link href="css/footable.standalone.css" rel="stylesheet">
	<link rel="icon" type="image/png" href="img/favicon.png" />

	<script src="js/jquery.1.9.0.min.js"></script>
	<script src="js/jquery-url.js"></script>
	<script src="js/kairosdb.js"></script>
	<script src="js/kairosdb-query.js"></script>
	<script src="js/kairosdb-flot.js"></script>
	<script src="js/kairosdb-highcharts.js"></script>
	<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
	<script src="js/graph.js"></script>
	<script src="js/jquery.flot.min.js"></script>
	<script src="js/jquery.flot.time.js"></script>
	<script src="js/jquery.flot.selection.js"></script>
	<script src="js/jquery.flot.resize.js"></script>
	<!--<script src="js/highcharts.js"></script>-->
	<script src="js/numeral.min.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/moment-timezone-with-data.min.js"></script>
	<script src="js/moment-strftime.js"></script>
	<script src="js/footable.min.js"></script>

	<script>
		var metricNames = [];
		var tagNames = [];
		var tagValues = [];

		function loadChart()
		{
			try
			{
				var query = decodeURI($.url("?q"));
				var queryObj = JSON.parse(query);

				var data = decodeURI($.url("?d"));
				var dataObj = JSON.parse(data);

				var zone = decodeURI($.url("?tz") || "utc");

				showChartForQuery("(Click and drag to zoom)", queryObj, dataObj, zone);

			}
			catch (e)
			{
				showErrorMessage(e);
			}
		}

		$(document).ready(function()
		{
			$("#errorContainer").hide();

			loadChart();
		});


	</script>

</head>

<body>



<div class="ui-widget" style="padding-bottom: 10px;">
	<div id="errorContainer" class="ui-state-error ui-corner-all" style="padding:5px; width: 500px;"></div>
</div>
<span id="status" class="ui-widget"></span>

<table style="width: 100%;">
	<tr>
		<td align="right">
			<div id="graphLegend"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="flotTitle" class="graphSubtitle"></div>
		</td>
		<td></td>
	</tr>
	<tr>
		<td style="width: 100%;">
			<div id="chartContainer" style="width: 100%; height:300px;"></div>
		</td>
	</tr>
</table>

<button id="resetZoom" class=ui-widget>Reset Zoom</button>
<button id="refreshGraph" class="ui-widget" onclick="loadChart()">Refresh Graph</button>
<div style="display: inline-block;">
	<span class="header ui-widget" style="margin-left: 1.5em;">Query Time: </span><span id="queryTime" class="ui-widget"></span>
	<span class="header ui-widget" style="margin-left: 1.5em;">Sample Size: </span><span id="sampleSize" class="ui-widget"></span>
	<span class="header ui-widget" style="margin-left: 1.5em;">Data Points: </span><span id="numDataPoints" class="ui-widget"></span>
</div>

<div class="header ui-widget">String Data Table</div>

<table class="table" data-paging="true">
</table>

</body>
</html>
